<template>
  <div id="searchGoodsAly01">
    <div class="showDiv02">
      <div class="talentBanner">智能匹配达人</div>
      <img src="@/assets/shi/talent_nav1.png" alt class="goodsIcon" />
      <div class="showGoods">
        <div class="topBox">
          <div>
            <div data-v-378b4e67 class="notice-box"></div>对标商品
          </div>

          <span class="seeHistory" @click="seeHistory">
            查看历史匹配记录
            <img src="@/assets/li/more.png" />
          </span>
        </div>
        <!-- 搜索商品 -->
        <section>
          <div class="searchBox">
            <input
              type="text"
              v-model="goodsWord"
              placeholder="请输入需要推广的商品名称"
              @keyup.enter="toSearch()"
            />
            <div @click="toSearch()">
              <img src="@/assets/meng/search01.png" />
            </div>
          </div>
          <p class="errText" v-if="isNull">*请输入需要推广的商品名称</p>
        </section>
      </div>
    </div>
    <el-dialog
      :visible.sync="goodsInfoPop"
      :show-close="false"
      top="40vh"
      width="519px"
    >
      <div class="goods_info_popup">
        <div class="cancel_img" @click="goodsInfoPop=false">
          <img src="@/assets/shi/close.png" alt="">
        </div>
        <div class="gi_popup_title">
          <div class="line"></div>
          <div class="text">商品信息确认</div>
        </div>
        <p class="gi_explain">我们通过您输入的商品信息初步判断您想推广的商品基本信息如下：</p>
        <div
          v-loading="roomLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <div class="gi_select_box">
            <div class="select_name">商品类目名称</div>
            <div class="select_box leimu_box">
              <el-select v-model="goodsType" placeholder="请选择" @change="changeType(goodsTypeList)">
                <el-option
                  v-for="item in goodsTypeList"
                  :key="item.id"
                  :label="item.categoryName"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-select class="select_two" v-model="goodsTypeTwo" placeholder="请选择">
                <el-option
                  v-for="item in goodsTypeTwoList"
                  :key="item.id"
                  :label="item.categoryName"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="gi_select_box">
            <div class="select_name">商品价格区间</div>
            <div class="select_box">
              <el-select v-model="goodsPrice" placeholder="请选择">
                <el-option
                  v-for="item in goodsPriceList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="gi_select_box">
            <div class="select_name">佣金价格区间</div>
            <div class="select_box">
              <el-select v-model="goldsPrice" placeholder="请选择">
                <el-option
                  v-for="item in goldPriceList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="gi_btn_box">
            <div class="gi_btn" @click="determine">确定</div>
          </div>
        </div> 
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SourceIcon from '@/component/SourceIcon.vue';
export default {
  name: 'searchGoodsAly01',
  components: { SourceIcon },
  data() {
    return {
      isNull: false,
      showGoods: 1,
      // 商品搜索结果
      orderBy: 1, //1降序 0升序
      sort: 1,
      loadingG: true,
      checked: '',
      goodsWord: '',
      price01: 0,
      price02: 1000,
      options: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
      rate01: '0%',
      rate02: '100%',
      cancel: null,
      count: 0,
      goodsInfoPop: false,
      //商品类目
      goodsType: "",
      goodsTypeList:[],

      goodsTypeTwo: "", //二级类目
      goodsTypeTwoList:[],
      //商品价格
      goodsPrice: "",
      goodsPriceList:[
        {id: 1, value:'0-15元', min: 0, max:15},
        {id: 2, value:'15-40元', min: 15, max:40},
        {id: 3, value:'40-90元', min: 40, max:90},
        {id: 4, value:'90-200元', min: 90, max:200},
        {id: 5, value:'200-500元', min: 200, max:500},
        {id: 6, value:'500-1000元', min: 500, max:1000},
        {id: 7, value:'1000-2000元', min: 1000, max:2000},
        {id: 8, value:'2000-5000元', min: 2000, max:5000},
        {id: 9, value:'5000+', min: 5000}
      ],
      roomLoading: false,
      //佣金率
      goldsPrice: "",
      goldPriceList:[{id: 1, value:'0-5%'},{id: 2, value:'5%-15%'},{id: 3, value:'15%-30%'},{id: 4, value:'30%+'}],
    };
  },
  computed: {},
  watch: {},
  created() {
    document.title = '智能找达人&智能分析服务平台-掌上精选';
    this.getClassification()
  },
  mounted() {},
  activated() {
    // 只有从预算回来才缓存 别的需要初始化
    if (!this.$route.query.alive) {
      this.showGoods = 1;
      this.goodsWord = '';
    }
  },
  methods: {
    // 确定按钮
    determine(){
      if(!this.goodsType || !this.goodsTypeTwo){
        if (document.getElementsByClassName("el-message").length === 0) {
          this.$message({
            message: "请选择商品类目名称",
            type: "warning",
            duration: 2000,
          });
        }
      }else{
        this.$router.push(`/inAnalysis/budget?goodsPrice=${this.goodsPrice}&goodsType=${this.goodsType}&goldsPrice=${this.goldsPrice}&goodsTypeTwo=${this.goodsTypeTwo}`);
        this.goodsInfoPop=false;
        this.goodsWord='';
      }
      
    },
    seeHistory() {
      let router = this.$router.resolve({
        path: `/inAnalysis/matchHistory`
      });
      window.open(router.href, '_blank');
    },
    toSearch() {
      
      if (this.goodsWord != '') {
        // this.showGoods = 2;
        this.checked = '';
        this.toSearchGoods();
        this.goodsInfoPop = true;
        this.isNull = false;
      } else {
        this.isNull = true;
      }
    },
    // 获取所有得到商品分类
    getClassification(){
      
      this.$axios.get('/api/product/GetProCategoriesNew').then(res=>{
        if(!res.data.code){
          this.goodsTypeList = res.data.data;
          this.goodsTypeList.forEach((item, idx) => {

            if (item.id=='0') {
              this.goodsTypeList.splice(idx, 1);
            }
          });
        }
      })
    },
    toSearchGoods(){
      this.goodsTypeTwo = '';
      this.goodsTypeTwoList = [];
      this.roomLoading = true,
      this.$axios.get('/api/intelligent/productsearchinfo?key='+this.goodsWord).then(res=>{
        this.roomLoading = false
        if(res.data.data){
          // 获取一级类目
          this.goodsType = String(res.data.data.firstcategory);
          //获取二级类目
          this.goodsTypeTwo = String(res.data.data.secondcategory)
          this.goodsTypeList.forEach(item=>{
            if(item.id == this.goodsType){
              this.goodsTypeTwoList = item.sublist
            }
          })

          this.goodsPrice = Number(res.data.data.proprice); //商品价格
          this.goodsPriceList.forEach(item=>{
            try{
              if(this.goodsPrice>item.min&&this.goodsPrice<=item.max){
                this.goodsPrice = item.id;
              }
            }catch(err){
              this.goodsPrice = 9;
            }
          
          })

          this.goldsPrice = Number(res.data.data.commissionrate)*100; //佣金率
          if(this.goldsPrice<=5){
            this.goldsPrice = 1;
          }
          if(this.goldsPrice>5 && this.goldsPrice<=15){
            this.goldsPrice = 2;
          }
          if(this.goldsPrice>15 && this.goldsPrice<=30){
            
            this.goldsPrice = 3;
          }
          if(this.goldsPrice>30){
            this.goldsPrice = 4;
          }
        }else{
          this.goodsType = "";
          this.goodsPrice = 1; //商品价格
          this.goldsPrice = 1
        }
        
      })
    },
    changeType(item) {
      item.forEach((item, index) => {
        if (item.id == this.goodsType) {
            this.goodsTypeTwoList = item.sublist;
            this.goodsTypeTwo = item.sublist[0].id;
        }
      });
    },
  }
};
</script>
<style lang="less">
.el-select-dropdown{
  z-index: 100000000 !important;
}
#searchGoodsAly01 {
  
  // /deep/.el-dialog__wrapper {
  //   z-index: 10!important;
  // }
  .showDiv02 {
    overflow: hidden;
    .talentBanner {
      width: 100%;
      height: 54px;
      text-align: center;
      line-height: 54px;
      border-radius: 4px;
      margin-top: 14px;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      background: url('~@/assets/shi/banner.png');
    }
    .goodsIcon {
      width: 455px;
      height: 64px;
      display: block;
      margin: 26px auto;
    }
    .showGoods {
      width: 100%;
      min-height: 71.6vh;
      background-color: #ffffff;
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;
      .topBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          font-size: 14px;
          color: #fd7f2c;
          cursor: pointer;
        }
        .notice-box {
          display: inline-block;
          width: 4px;
          height: 16px;
          border-radius: 100px;
          margin-right: 6px;
          background-color: #fd7f2c;
          margin-top: 1px;
        }
        > div {
          font-size: 16px;
          color: #222;
          font-weight: 600;

          display: flex;
          align-items: center;
        }
      }
      //   条件
      .condition {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 20px;
        .title {
          font-size: 14px;
          color: #222222;
        }
        .conditionItem {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-left: 17px;
          img {
            width: 16px;
            height: 16px;
            margin-right: 6px;
          }
          .rateIcon {
            width: 14px;
            height: 14px;
            margin-left: 14px;
          }
          .itemTitle {
            font-size: 14px;
            color: #555555;
            padding-right: 10px;
          }

          .inputBox {
            position: relative;
            input {
              box-sizing: border-box;
              width: 120px;
              height: 32px;
              background-color: #fff;
              border-radius: 4px;
              border: solid 1px #e5e5e5;
              padding-left: 10px;
              padding-right: 45px;
            }
            span {
              font-size: 14px;
              color: #555555;
              position: absolute;
              top: 50%;
              right: 10px;
              transform: translate(-50%, -50%);
            }
          }
          .to {
            font-size: 13px;
            color: #888888;
            padding: 0 6px;
          }
        }
      }
      .tips {
        font-size: 14px;
        color: #888888;
        padding-top: 20px;
        padding-bottom: 10px;
      }
      //   table
      table {
        thead {
          img {
            width: 5px;
            height: 10px;
            vertical-align: 0;

            cursor: pointer;
          }
          tr {
            th:nth-child(1) {
              text-align: left;
              padding-left: 52px;
              width: 325px;
            }
            th:last-child {
              width: 140px;
            }
            th:nth-child(2),
            th:nth-child(3),
            th:nth-child(4) {
              width: 10%;
            }
            th:nth-child(5),
            th:nth-child(6) {
              cursor: pointer;
            }
          }
        }
        tbody {
          tr {
            height: 77px;
            td {
              text-align: center;
            }

            td:nth-child(2) {
              font-size: 15px;
              color: #222;
              font-family: DINAlternate-Bold;
            }

            td:nth-child(3),
            td:nth-child(4),
            td:nth-child(5),
            td:nth-child(6) {
              font-size: 15px;
              font-family: DINAlternate-Bold;
              color: #222;
            }
          }
        }
        // 商品
        .goodsBox {
          display: flex;
          padding-left: 40px;
          align-items: center;
          cursor: pointer;
          .leftImg {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            border: 1px solid #e5e5e5;
          }
          .img1 {
            /deep/img {
              position: absolute;
              top: 2px;
              left: 6px;
            }
          }
          .rightBox {
            flex: 1;
            margin-left: 10px;
            text-align: left;
            position: relative;
            div:nth-of-type(1) {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              text-align: left;

              img {
                width: 18px;
                height: 18px;
                margin-right: 5px;
              }
              span {
                display: block;
                width: 200px;
                text-align: left;
                font-weight: 600;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                text-indent: 24px;
                line-height: 20px;
                font-size: 14px;
              }
              > span:hover {
                color: #ff924b;
              }
            }
          }
        }
        .checkImg {
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
        .checkImg1 {
          width: 19px;
          height: 19px;
          cursor: pointer;
        }
      }
      // 按钮
      .optionBtnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 42px;
        margin-bottom: 35px;
        button:nth-child(1) {
          width: 115px;
          height: 40px;
          border-radius: 4px;
          border: solid 1px #fd7f2c;
          font-size: 14px;
          color: #fd7f2c;
        }
        .nextButton {
          width: 115px;
          height: 40px;
          background-color: #fd7f2c;
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
          margin-left: 50px;
        }
        .nextButton01 {
          background-color: #cfcfcf !important;
        }
      }
    }
  }
  .searchBox {
    width: 513px;
    height: 51px;
    border-radius: 4px;
    border: solid 1px #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    margin-top: 216px;
    input {
      width: 436px;
      height: 51px;
      line-height: 100%;
      border: none;
      padding-left: 21px;
      padding-right: 21px;
      font-size: 16px;
      color: #222;
    }
    input::-webkit-input-placeholder {
      color: #b5b5b5 !important;
    }
    div {
      width: 77px;
      height: 51px;
      background-color: #fd7f2c;
      border-radius: 4px;
      position: relative;
      img {
        cursor: pointer;
        width: 21px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .errText {
    width: 513px;
    margin: 0 auto;
    text-align: left;
    font-size: 14px;
    color: #ea1b0b;
    padding-top: 10px;
    padding-left: 5px;
  }
  .searchBox01 {
    width: 400px;
    height: 40px;
    margin-top: 20px;
    margin-left: 0;
    input {
      width: 360px;
      height: 40px;
      line-height: 100%;
      font-size: 16px;
    }
    div {
      width: 60px;
      height: 40px;
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
  .seeHistory {
    > img {
      width: 7px;
      height: 11px;
      margin-left: 5px;
      margin-top: -3px;
    }
  }
  /deep/.el-dialog{
    border-radius: 4px;
  }
  .goods_info_popup{
    width: 100%;
    background-color: #fff;
    border-radius: 4px;
    padding: 24px 28px;
    box-sizing: border-box;
    position: relative;
  }
  .cancel_img{
    width: 16px;
    height: 16px;
    position: absolute;
    top: 14px;
    right: 14px;
    cursor: pointer;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .gi_popup_title{
    display: flex;
    align-items: center;
    .line{
      width: 4px;
      height: 16px;
      background-color: #fd7f2d;
      border-radius: 2px;
    }
    .text{
      font-size: 16px;
      color: #222222;
      font-weight: 600;
      margin-left:  6px;
    }
  }
  .gi_explain{
    font-size: 14px;
    color: #888888;
    margin-top: 10px;
    margin-bottom: 29px;
  }
  .gi_select_box{
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    .select_name{
      font-size: 14px;
      color: #888888;
    }
    .select_box{
      margin-left: 13px;
      .el-input__inner{
        width: 300px;
      }
    }
    .leimu_box{
      display: flex;
      .el-input__inner{
        width: 145px;
      }
      .select_two{
        margin-left: 10px;
      }
    }
  }
  .gi_btn_box{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    .gi_btn{
      width: 115px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #fd7f2c;
      border-radius: 4px;
      font-size: 14px;
	    color: #ffffff;
      cursor: pointer;
    }
  }
}
</style>
